<template>
    <el-dialog v-dialogDrag v-if="popenevTVisible" title="请选择群组" :visible.sync="popenevTVisible" :before-close="handleCancel" width="850px" :close-on-click-modal="false">
        <div class="choice-group-box">
            <!-- 机构 -->
            <div class="org-list">
                <!-- 搜索框 -->
                <el-input class="org-search" placeholder="搜索" v-model="searchoOrgkey">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-scrollbar class="scorll-Y">
                    <el-tree class="filter-tree" :data="treeData" :props="{ label: 'orgCommonname' }" node-key="unid" :default-expanded-keys="expandedKey" :expand-on-click-node="false" :highlight-current="true" :check-on-click-node="true" :check-strictly="true" @check-change="handleOrgChange" :filter-node-method="filterOrgNode" ref="orgTree">
                    </el-tree>
                </el-scrollbar>
            </div>
            <div class="group-list">
                <el-scrollbar class="scorll-Y">
                    <el-tree class="filter-tree" :default-checked-keys="groupUnidArr" :show-checkbox="true" :data="groupList" :props="{ label: 'name' }" node-key="unid" :expand-on-click-node="false" :highlight-current="true" :check-on-click-node="true" :check-strictly="true" @check-change="handleGroupChange" ref="groupTree">
                    </el-tree>
                    <!-- <div class="group-item" v-for="(item,index) in gr"></div> -->
                </el-scrollbar>
            </div>
            <div class="group-list">
                <el-input v-model="personNameStr" disabled style="height:100%" type="textarea" />
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleOk">确定</el-button>
            <el-button @click="handleCancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getOrgTree } from "../../api/system/organzation/api";
    import { getOrgGroupList } from '../../api/module/systemGroup/systemGroup'
    export default {
        data()
        {
            return {
                popenevTVisible: true,
                multiple: false,
                treeData: [], //机构列表
                groupList: [], //群组列表
                //promise 状态
                expandedKey: [],
                promiseStatus: null,
                searchoOrgkey: "", //机构搜索
                searchkey: "",
                params: {
                    pageSize: 1000,
                    pageNo: 1,
                    ssjgUnid: "",
                },
                replaceFields: {
                    title: "name", key: "unid"
                },
                //人员名字字符串
                personNameStr: "",
                groupUnidArr: [],
                groupDataArr: [], //已选群组数据
            };
        },
        watch: {
            searchoOrgkey(val)
            {
                this.$refs.orgTree.filter(val);
            },
        },
        methods: {
            //过滤机构
            filterOrgNode(value, data)
            {
                if (!value) return true;
                return data[this.defaultProps.label].indexOf(value) !== -1;
            },
            show(showData, replaceFields, multiple)
            {
                //首先整理回显群组数据
                console.log(showData,"===========回显参数");
                if (showData && showData.constructor == Array)
                {
                    this.groupDataArr = [...showData];
                    this.groupDataArr.forEach(item =>
                    {
                        this.groupUnidArr.push(item.unid);
                    });
                    this.groupList = this.groupDataArr || [];
                }

                this.updateOrgName();

                this.getOrgTree();
                this.multiple = multiple || false;
                this.replaceFields = replaceFields || this.replaceFields;

                // 创建promise
                return new Promise((resolve, reject) =>
                {
                    this.promiseStatus = {
                        resolve,
                        reject,
                    };
                });
            },
            handleOk()
            {
                let selects = this.groupDataArr;
                this.promiseStatus.resolve({
                    choiceData: selects,
                    replaceFields: this.replaceFields,
                    personNameStr: this.personNameStr
                });
                this.destroyElement();
            },
            handleCancel()
            {
                //清空勾选项
                this.promiseStatus.reject({
                    msg: "取消",
                });

                this.destroyElement();
            },
            // 机构变化
            handleOrgChange(data, check, tree)
            {
                this.params.ssjgUnid = data.unid;
                this.getOrgGroupList();
            },
            //获取机构
            getOrgTree()
            {
                getOrgTree().then((res) =>
                {
                    this.treeData = res.result || [];
                    this.treeData.forEach((element) =>
                    {
                        this.expandedKey.push(element.unid);
                    });
                });
            },
            /**
             * 获取群组列表
             */
            getOrgGroupList()
            {
                getOrgGroupList(this.params).then((res) =>
                {
                    this.groupList = res.result.data || [];
                });
            },
            /**
             * 监听群组变化
             */
            handleGroupChange(data, check, tree)
            {
                if (check && !this.multiple)
                {
                    this.$refs.groupTree.setCheckedKeys([data[unid]]);
                }
                this.groupDataArr = this.$refs.groupTree.getCheckedNodes();
                this.updateOrgName();

            },
            //更新人员群组中的人员
            updateOrgName()
            {
                let tampPersonName = [];
                this.groupDataArr.forEach(preGroupOrg =>
                {
                    if (preGroupOrg.persons && preGroupOrg.persons.commonNames && preGroupOrg.persons.commonNames.m_ArrayList)
                    {
                        tampPersonName.push(preGroupOrg.name + "(" + preGroupOrg.persons.commonNames.m_ArrayList.join(",") + ")")
                    } else
                    {
                        tampPersonName.push(preGroupOrg.name + "(" + preGroupOrg.organizationCommonnames + ")")
                    }
                });
                this.personNameStr = tampPersonName.join(",");
            },
            /**
             * cs 2022-4-8
             * 销毁组件
             */
            destroyElement()
            {
                this.popenevTVisible = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .choice-group-box {
        display: flex;
        .org-list {
            width: 300px;
            border: 1px solid #e6ebf5;
            border-radius: 4px;
            .org-search {
                width: 80%;
                margin: 20px 10px 0;
                height: 32px;
                ::v-deep .el-input__inner {
                    border-radius: 100px;
                }
            }
        }
        .group-list {
            border: 1px solid #e6ebf5;
            border-radius: 4px;
            flex: 1;
            margin-left: 10px;
            ::v-deep .el-transfer {
                display: flex !important;
                align-items: center;
                .el-transfer__buttons {
                    display: flex;
                    padding: 0 10px;
                    flex-direction: column-reverse;
                    .el-button {
                        margin: 10px 0;
                        width: 70px;
                        font-size: 12px;
                        height: 30px;
                        line-height: 1em;
                        padding: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }

    .scorll-Y {
        height: 230px;
        margin-top: 10px;
        ::v-deep .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }

    ::v-deep .el-textarea__inner {
        height: 100%;
    }
</style>
